<template>
  <div class="list-page">
    <Row type="flex" align="middle" style="margin-bottom: 10px;">
        说明：登录后，在APP首页顶部展示
        <div class="demo-upload-list">
            <img :src="imgUrl" fit="cover" width="100%" height="100%" />
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView()"></Icon>
            </div>
        </div>
        <Modal title="轮播页" v-model="visible">
            <img :src="imgUrl" v-if="visible" style="width: 100%">
        </Modal>
    </Row>
    <Row>
      <div class="toolbar">
                <router-link :to="{ path: '/banners/add' }">
                  <Button
                    type="primary"
                    icon="md-add"
                    style="margin: 0 10px"
                    v-if="Validation.check(Resources.BANNERS_ADD) && Validation.check(Resources.UPLOAD_IMAGE)"
                  >新建轮播页
                  </Button>
                </router-link>
        <Input
          placeholder="请输入轮播页名称"
          v-model="bloc.form.bannername"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="请输入轮播页品牌商归属"
          v-model="bloc.form.companyname"
          style="width: 180px; margin-right: 10px"
          v-if="tepee === '1'"
        />
        <Input
          placeholder="请输入轮播页经销商归属"
          v-model="bloc.form.agentname"
          style="width: 180px; margin-right: 10px"
          v-if="tepee === '1'"
        />
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="modifyItem(row)"
              v-if="Validation.check(Resources.BANNERS_UPDATE) && Validation.check(Resources.UPLOAD_IMAGE)"
              type="info"
            >编辑
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              v-if="Validation.check(Resources.BANNERS_DELETE)"
              type="warning"
            >删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { ListBloc } from '@/view/banners/ListBloc';
    import { Banners } from '@/base/model/Banners';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { store } from '@/store/Store';
    const columns = (bloc: ListBloc) => [
        {
            title: '轮播页图片',
            key: 'imageurl',
            align: 'left',
            width: 200,
            render: (h: any, params: any) => {
                return h('div', [
                    h('img', {
                        domProps: {
                            src: params.row.imageurl
                        },
                        style: {
                            width: '50px',
                            height: '50px'
                        }
                    })
                ]);
            },
            tooltip: true
        },
        {
            title: '轮播页名称',
            key: 'bannername',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '排序',
            key: 'sort',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '轮播页归属',
            key: 'bannerid',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.agentid === 1
                            ? params.row.companyname
                            : params.row.agentname
                    }
                });
            },
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '归属人类型',
            key: 'agentName',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: params.row.agentid === 1
                            ? '品牌商'
                            : '经销商'
                    }
                });
            },
            align: 'left',
            width: 220,
            tooltip: true
        },
        {
            title: '发布状态',
            key: 'status',
            render: (h: any, params: any) => {
                return h('div', [
                    h(
                        'i-switch',
                        {
                            props: {
                                type: 'primary',
                                size: 'small',
                                title: '状态',
                                disabled: (params.row.status === 0 && !Validation.check(Resources.BANNERS_UPDATE)),
                                value: params.row.status === 1
                            },
                            style: {
                                marginRight: '2px'
                            },
                            on: {
                                'on-change': value => {
                                    bloc.switchStatus(params.row.bannerid, value, params.index);
                                }
                            }
                        },
                        'selected'
                    )
                ]);
            },
            tooltip: true,
            width: 80
        },
        // {
        //     title: '发布动作',
        //     key: 'actions',
        //     render: (h: any, params: any) => {
        //         return h('span', {
        //             domProps: {
        //                 innerText: params.row.actions === 2
        //                     ? 'app外打开'
        //                     : 'app内打开'
        //             }
        //         });
        //     },
        //     align: 'left',
        //     minWidth: 100,
        //     tooltip: true
        // },
        {
            title: '开始时间',
            key: 'startTime',
            width: 200,
        },
        {
            title: '结束时间',
            key: 'endTime',
            width: 200,
        },
        {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('操作错误');
                    });
            });
        }
        bloc: ListBloc = new ListBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);

        public row: any;
        visible=false;
        imgUrl='https://irest.oss-cn-hangzhou.aliyuncs.com/image/1555437021298720.png';
        removeItem(row) {
            this.row = row;
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除后将无法恢复！还要继续吗？',
                okText: '删除',
                cancelText: '取消',
                onOk: () => {
                    this.bloc.removeItem(row)
                        .then((res) => {
                            if (res.name === '') {
                                this.$Message.success('删除成功');
                            } else {
                                this.$Message.error('删除失败');
                            }
                        }).finally(() => {
                        this.bloc.reset();
                    });
                }
            });
        }

        modifyItem(dataItem: Banners) {
            this.$router.push({
                path: '/banners/nav/banner/edit/' + dataItem.bannerid});
        }
        get tepee() {
            this.bloc.type = store.state.user.tepee;
            if(store.state.user.tepee=='2'){//隐藏经销商栏目
                this.columns=this.columns.filter(column => column.key !== "agentName");
            }
            return store.state.user.tepee
        }
        handleView () {
            this.visible = true;
        }
    }

</script>

<style lang="less">
</style>
